<template>
	<view>
		<u-navbar :border-bottom='false'>
			<view class="searchBox">
				<u-search placeholder="" :show-action="false" v-model="keyword" @search="searchFn"></u-search>
			</view>
		</u-navbar>
		<view class="content">
			<u-waterfall v-model="goodsList" ref='goodsWaterfall'>
				<template v-slot:left="{leftList}">
					<view class="goods" v-for="(item, index) in leftList" :key="index"
						@click="navTo('../goods/goods?id='+item.goods_sku_id)">
						<image :src="item.image_path" mode=""></image>
						<view class="title">
							{{item.name}}
						</view>
						<view class="price">
							<view class="tit" v-if="$store.state.userInfo.user_level == 0">
								<text style="font-weight: normal;font-size: 24rpx;">¥</text>{{item.i_price}}
							</view>
							<view class="tit" v-else>
								<text style="font-weight: normal;font-size: 24rpx;">¥</text>{{item.i_vip_price}}
							</view>
							<text class="fukuan">{{item.sales_sum}}人付款</text>
						</view>
						<view class="price-box">
							<view class="rel-price" v-if="$store.state.userInfo.user_level == 0">
								¥<text>{{(Number(item.i_price)-Number(item.use_welfare_fund)).toFixed(2)}}</text>
							</view>
							<view class="rel-price" v-else>
								¥<text>{{(Number(item.i_vip_price)-Number(item.use_welfare_fund)).toFixed(2)}}</text>
							</view>
							<view class="fl-price">
								+ {{item.use_welfare_fund}} 福利金
							</view>
						</view>
					</view>
				</template>
				<template v-slot:right="{rightList}">
					<view class="goods" v-for="(item, index) in rightList" :key="index"
						@click="navTo('../goods/goods?id='+item.goods_sku_id)">
						<image :src="item.image_path" mode=""></image>
						<view class="title">
							{{item.name}}
						</view>
						<view class="price">
							<view class="tit" v-if="$store.state.userInfo.user_level == 0">
								<text style="font-weight: normal;font-size: 24rpx;">¥</text>{{item.i_price}}
							</view>
							<view class="tit" v-else>
								<text style="font-weight: normal;font-size: 24rpx;">¥</text>{{item.i_vip_price}}
							</view>
							<text class="fukuan">{{item.sales_sum}}人付款</text>
						</view>
						<view class="price-box">
							<view class="rel-price" v-if="$store.state.userInfo.user_level == 0">
								¥<text>{{(Number(item.i_price)-Number(item.use_welfare_fund)).toFixed(2)}}</text>
							</view>
							<view class="rel-price" v-else>
								¥<text>{{(Number(item.i_vip_price)-Number(item.use_welfare_fund)).toFixed(2)}}</text>
							</view>
							<view class="fl-price">
								+ {{item.use_welfare_fund}} 福利金
							</view>
						</view>
					</view>
				</template>
			</u-waterfall>
			<view style="padding: 10rpx 0;">
				<u-loadmore bg-color="#f2f2f2" :status="loadStatus"></u-loadmore>
			</view>
		</view>
	</view>
</template>

<script>
	import myRequest from '@/api/index.js'
	export default {
		data(){
			return {
				isLoading: true,
				loadStatus:'loading',
				keyword:'',
				goodsList:[],
				page:'1',
			}
		},
		onLoad(option) {
			this.keyword = option.keyword
			this.getSearchList()
		},
		onReachBottom() {
			if (!this.isLoading) return;
			let page = Number(this.page) + 1
			this.page = page.toString()
			this.loadStatus = 'loading';
			this.getSearchList()
			setTimeout(() => {
				if (!this.isLoading) {
					this.loadStatus = 'nomore'
					this.isLoading = true
				} else {
					this.loadStatus = 'loading';
				}
			}, 1000)
		},
		methods:{
			navTo(url){
				uni.navigateTo({
					url:url
				})
			},
			// 搜索
			searchFn(){
				this.page = '1'
				this.$refs.goodsWaterfall.clear()
				this.getSearchList()
			},
			// 获取商品
			async getSearchList(){
				let {page,keyword} =this
				let res =await myRequest.getGoodsList({
					goods_source:'1',
					keyword:keyword,
					page:page,
				})
				if (res.data.length == 0) {
					this.loadStatus = 'nomore'
					this.isLoading = false
					return
				} else {
					this.goodsList = [...this.goodsList, ...res.data]
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.searchBox {
		width: 642rpx;
		height: 68rpx;
		background: #F2F2F7;
		border-radius: 40rpx;
	}
	.content {
			padding: 0 20rpx;
			.goods {
				width: 348rpx;
				height: auto;
				background-color: #FFFFFF;
				border-radius: 16rpx;
				padding-bottom: 18rpx;
				overflow: hidden;
				margin-top: 20rpx;
			
				image {
					width: 348rpx;
					height: 348rpx;
				}
			
				.price-box {
					padding-left: 10rpx;
					width: fit-content;
					width: -webkit-fit-content;
					width: -moz-fit-content;
					display: flex;
					margin-top: 12rpx;
			
					.rel-price {
						height: 44rpx;
						width: fit-content;
						width: -webkit-fit-content;
						width: -moz-fit-content;
						background: linear-gradient(180deg, #FBE9B9 0%, #FDE6B8 100%);
						border-radius: 8rpx 0px 0px 8rpx;
						padding: 0 6rpx;
						font-size: 24rpx;
						font-family: Arial;
						font-weight: 400;
						line-height: 44rpx;
						color: #333333;
			
						text {
							font-size: 32rpx;
							font-weight: bold;
							margin-left: 4rpx;
						}
					}
			
					.fl-price {
						height: 44rpx;
						width: fit-content;
						width: -webkit-fit-content;
						width: -moz-fit-content;
						background: #333333;
						border-radius: 0px 8rpx 8rpx 0px;
						font-size: 24rpx;
						font-family: Arial;
						font-weight: 400;
						color: #FBE8B8;
						line-height: 44rpx;
						padding: 0 6rpx;
					}
				}
			
				.title {
					margin-top: 6rpx;
					padding-left: 12rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
				}
			
				.price {
					margin-top: 6rpx;
					padding-left: 12rpx;
					padding-right: 12rpx;
					display: flex;
					align-items: center;
			
					.tit {
						font-size: 36rpx;
						font-family: Arial;
						font-weight: 600;
						color: #FF4600;
						text-decoration: line-through
					}
			
					.fukuan {
						margin-left: auto;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #999999;
					}
				}
			}
	}
</style>
